<template>
<!-- base select component -->
  <select v-model="currentOption" :id="id" @change="handleSelectChange">
    <option v-for="item in lists" :key="item.id" :value="item.id">
      <slot :item="item"></slot>
    </option>
  </select>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array,
      required: true,
    },
    id: {
      type: String,
    },
    defaultOption: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      currentOption: this.defaultOption,
    };
  },
  methods: {

    // transfer select option to main component
    handleSelectChange() {
      this.$emit("selected", this.currentOption, this.$parent);
    },
  },
};
</script>

<style>
</style>